<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap使用案例</title>

    <!-- Bootstrap 该样式中已经引入了normal.css样式文件-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="container">
     <div class="row">
       <header class="col-md-2">
         <div class="logo">
          <a href="#">
            <img src="./images/logo.png" alt="">
          </a>
         </div>
         <div class="nav">
           <ul>
             <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
             <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
             <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
             <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
             <li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
           </ul>
         </div>
       </header>
       <article class="col-md-7">
         <!-- 新闻模块 清除浮动的类已经定义好了-->
         <div class="news clearfix">
           <ul>
             <li>
               <a href="# ">
                 <img src="upload/lg.png" alt="">
                 <p>阿里百秀</p>
               </a>
             </li>
             <li>
              <a href="# ">
                <img src="upload/1.jpg" alt="">
                <p>齐了 这是好地方发一个水电费哪里是你的反馈发 发售</p>
              </a>
             </li>
             <li>
              <a href="# ">
                <img src="upload/2.jpg" alt="">
                <p>齐了 这是好地方发一个水电费哪里是你的反馈发 发售</p>
              </a>
             </li>
             <li>
              <a href="# ">
                <img src="upload/3.jpg" alt="">
                <p>齐了 这是好地方发一个水电费哪里是你的反馈发 发售</p>
              </a>
             </li>
             <li>
              <a href="# ">
                <img src="upload/4.jpg" alt="">
                <p>齐了 这是好地方发一个水电费哪里是你的反馈发 发售</p>
              </a>
             </li>
           </ul>
         </div>
         <!-- 出版新闻模块 -->
         <div class="publish">
           <div class="row">
             <div class="col-sm-9">
               <h3>生活馆 关于指甲的10个健康知识 知道几个</h3>
               <p class="text-muted">alibaixiu 发布于 2021-02-20</p>
               <p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个隐藏在指甲里的知识吧！</p>
               <p class="text-muted">阅读（20012）评论（1）赞（22）标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
             </div>
             <div class="col-sm-3 icon">
               <img src="upload/3.jpg" alt="">
             </div>
           </div>
           <div class="row">
            <div class="col-sm-9">
              <h3>生活馆 关于指甲的10个健康知识 知道几个</h3>
              <p class="text-muted">alibaixiu 发布于 2021-02-20</p>
              <p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个隐藏在指甲里的知识吧！</p>
              <p class="text-muted">阅读（20012）评论（1）赞（22）标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
            </div>
            <div class="col-sm-3 icon">
              <img src="upload/3.jpg" alt="">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <h3>生活馆 关于指甲的10个健康知识 知道几个</h3>
              <p class="text-muted">alibaixiu 发布于 2021-02-20</p>
              <p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个隐藏在指甲里的知识吧！</p>
              <p class="text-muted">阅读（20012）评论（1）赞（22）标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</p>
            </div>
            <div class="col-sm-3 icon">
              <img src="upload/3.jpg" alt="">
            </div>
          </div>
         </div>
       </article>
       <aside class="col-md-3">
         <a href="#" class="banner">
           <img src="upload/zgboke.jpg" alt="">
         </a>
         <a href="#" class="hot">
           <span class="btn btn-primary">热搜</span>
           <h4 class="text-primary">欢迎加入中国博客联盟</h4>
           <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台 ............</p>
         </a>
       </aside>
     </div>
   </div>
  </body>
</html>